<template>
	<section class="header_box">
		<el-button type="primary" :disabled="disabled">当前模板</el-button>
        <el-select v-model="processTitle" @change="selectProcess"  placeholder="请选择" class="select">
            <el-option label="无模板" :value="null"></el-option>
            <el-option v-for="item in allProcessArray.filter(v=>v)" :key="item.title" :label="item.title" :value="item.title"></el-option>
        </el-select>
        <el-checkbox class="default" @change="setDefault" :value="defaultProcess">设置默认模板</el-checkbox>
        <el-dropdown class="el_dropdown"  trigger="click">
			<el-button type="danger">删除模板</el-button>
			<el-dropdown-menu slot="dropdown" v-if="delProcessArray.length">
				<el-checkbox-group v-model="checkList" @change='handleCheckedCitiesChange'>
					<el-dropdown-item v-for="item in delProcessArray.filter(v=>v)" :key="item.title">
						<div @click.stop ><el-checkbox :label="item.title"></el-checkbox></div>
					</el-dropdown-item>
				</el-checkbox-group>
			</el-dropdown-menu>
			<el-dropdown-menu v-else>
				<el-dropdown-item>无模板</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
        <!-- <el-button type="danger" @click="delProcess">删除模板</el-button> -->
        <el-button type="success" :disabled="disabled" @click="saveProcess">保存模板</el-button>
        <el-button type="warning" :disabled="originalTableData.length>1?false:true" @click="retreat">后退</el-button>
	</section>
</template>

<script>
	export default {
		name: 'HeaderRight',
		title: '头部右边',
		props: {
			disabled: [Boolean],					// 禁止
			saveProcessArray: [Array, Object],		// 保存模板数据
			originalTableHead: [Array, Object],		// 原来的表头数据
			originalTableData: [Array, Object],		// 原来的表格数据
		},
		computed: {
			// 去掉初始化模板，得到用户保存的模板
			delProcessArray() {
				let array = this.$Util.deepCopy(this.allProcessArray)
				return array.filter((v) => v.title !== '初始模板')
			}
		},
		methods: {
			// 判断是否保存了初始模板
			hasInitProcess(data) {
				let arr = data.filter((v) => this.initProcess && v.title === this.initProcess.title)
				console
				if (arr.length) {
					return true
				}
				return false
			},
			// 删除模板
			handleCheckedCitiesChange(array) {
				let name = array[0]
				this.$confirm('此操作将删除模板, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
		        }).then(() => {
		        	this.processTitle = this.processTitle === name?null:this.processTitle
		        	// 判断是否删除的是默认模板
		        	if (this.defaultProcessArray && name === this.defaultProcessArray.title ) {
		        		this.defaultProcess = false
		        		let defaultProcess = JSON.stringify(false)
	                    window.localStorage.setItem('defaultProcess', defaultProcess)
	                    this.defaultProcessArray = null
	                    let array = JSON.stringify(null)
	                    window.localStorage.setItem('defaultProcessArray', array)
		        	}
		        	this.allProcessArray = this.allProcessArray.filter((v) => v.title !== name)
		        	window.localStorage.setItem('Process', JSON.stringify(this.allProcessArray))
		        	this.checkList.splice(this.checkList.indexOf(name), 1)
		        }).catch(() => {
		        	this.checkList = []
		        });
			},
			// 设置默认模板
	        setDefault(value) {
	            if(this.$Util.hasHintDialog.call(this, "请选择模板", !this.processTitle)){
	                if(!this.defaultProcess){
	                    this.defaultProcessArray = this.allProcessArray.filter((v) => v.title === this.processTitle)[0]
	                    let array = JSON.stringify(this.defaultProcessArray)
	                    window.localStorage.setItem('defaultProcessArray', array)
	                    this.defaultProcess = true
	                    let defaultProcess = JSON.stringify(this.defaultProcess)
	                    window.localStorage.setItem('defaultProcess', defaultProcess)
	                }else{
	                    let array = JSON.stringify(null)
	                    window.localStorage.setItem('defaultProcessArray', array)
	                    let defaultProcess = JSON.stringify(false)
	                    window.localStorage.setItem('defaultProcess', defaultProcess)
	                    this.defaultProcess = false
	                }
	            }
	        },
	        // 选择模板
	        selectProcess(value) {
	        	let saveProcessArray
	            if(!value){
	                this.defaultProcess = false
	                saveProcessArray = []
	            }else{
	            	// 判断选择是否默认模板
		            if(this.defaultProcessArray && this.defaultProcessArray.title == value){
		                this.defaultProcess = true
		            }else{
		                this.defaultProcess = false
		            }
		            saveProcessArray = this.allProcessArray.filter((v) => v.title === value)[0].data
	            }
	            // 向父组件传值
	            this.$emit('parentData',{
	            	saveProcessArray,
	            })
	        },
	        // 保存模板
	       	saveProcess() {
	            this.$prompt('请输入模板名称', '保存模板', {
	                confirmButtonText: '确定',
	                cancelButtonText: '放弃保存'
	            }).then(({ value }) => {
	                // 判断模板是否已经存在
	                let arr = this.allProcessArray.filter((v) => v.title == value)
	                let str = `"${value}"模板已经存在，请另起模板名称`
	                if(this.$Util.hasHintDialog.call(this, str, arr.length)){
	                    this.$confirm(`你保存模板名称是"${value}"`, '提示', {
	                        confirmButtonText: '确定',
	                    }).then(() => {
	                        let array = this.allProcessArray
	                        array.push({
	                            title: value,
	                            data: this.saveProcessArray
	                        })
	                        array = JSON.stringify(array)
	                        window.localStorage.setItem('Process', array)
	                    })
	                }
	            }).catch(() => {
	                this.$message({
	                    type: 'info',
	                    message: '已放弃保存'
	                });       
	            });
	        },
	        // 后退
	        retreat() {
	            if(this.originalTableData.length > 1){
	                // 删除最后一个
	                let saveProcessArray = this.saveProcessArray
	                	saveProcessArray.pop()
	                let originalTableData = this.originalTableData
	                	originalTableData.pop()
	                let originalTableHead = this.originalTableHead
	                	originalTableHead.pop()                
	                let tableData = originalTableData[originalTableData.length - 1]
	                let tableHead = originalTableHead[originalTableHead.length - 1]
	                // 向父组件传值
		            this.$emit('parentData',{
		            	saveProcessArray,
		            	originalTableData,
		            	originalTableHead,
		            	tableData,
		            	tableHead,
		            })
	            }
	        },
		},
		data() {
			return {
				indexProcess: 0,                    // 模板索引
	            processTitle: '',                   // 模板名称
	            defaultProcess: '',                 // 设置默认模板
	            defaultProcessArray: [],			// 默认模板数据
            	checkList: [],
            	allProcessArray: [], 				// 全部模板
            	initProcess: {
            		title: '初始模板',
        			data: [
        				{
        					title: '删除',
        					type: 'del',
        					data: ["Block Type", "96alum", "__EMPTY_2", "__EMPTY_4"]
        				}
        			]
            	}         
			}
		},
		mounted() {
			// 加载模板
	        let allProcessArray = JSON.parse(window.localStorage.getItem('Process')) || []
	        console.log(allProcessArray)
	        let processTitle, saveProcessArray
	        // 判断是否有保存初始模板
	        if(!this.hasInitProcess(allProcessArray)){
	        	allProcessArray.unshift(this.initProcess)
	        }
	        this.allProcessArray = allProcessArray
	        // 获取默认模板
	        this.defaultProcessArray = JSON.parse(window.localStorage.getItem('defaultProcessArray'))
	        this.defaultProcess = JSON.parse(window.localStorage.getItem('defaultProcess'))
	        // 判断是否有默认模板
	        if(this.defaultProcessArray) {
	        	processTitle = this.defaultProcessArray.title
	        	saveProcessArray = this.defaultProcessArray.data
	        }else{
	        	processTitle = this.initProcess.title
	        	saveProcessArray = this.initProcess.data
	        }
	        this.defaultProcess = JSON.parse(window.localStorage.getItem('defaultProcess')) || true
	        this.processTitle = processTitle
	        // 向父组件传值
	        this.$emit('parentData',{
	        	saveProcessArray,
	        })
		}
	}
</script>

<style lang="scss" scoped>
	.header_box{
		width: 100%;
		.select{
	        width: 120px;
	        margin: 0 10px;
	    }
	    .default{
	        padding-right: 30px;
	    }
	    .el_dropdown{
	    	margin-right: 10px;
	    }
	}
</style>